<template>
  <el-card class="table-card">
    <el-table 
      :data="displayData" 
      v-loading="loading" 
      style="width: 100%"
    >
      <el-table-column prop="name" label="任务名称" min-width="150" resizable>
        <template #default="scope">
          <span v-if="scope.row.name">{{ scope.row.name }}</span>
          <span v-else class="text-gray-400">未设置</span>
        </template>
      </el-table-column>
      <el-table-column prop="courseName" label="课程名称" min-width="120" resizable />
      <el-table-column prop="termName" label="学期" width="100" resizable />
      <el-table-column label="专业" width="120" resizable>
        <template #default="scope">
          <span v-if="scope.row.majorNames && scope.row.majorNames.length > 0">
            {{ scope.row.majorNames.join(', ') }}
          </span>
          <span v-else class="text-gray-400">未设置</span>
        </template>
      </el-table-column>
      <el-table-column label="培养层次" width="100" resizable>
        <template #default="scope">
          <span v-if="scope.row.cengCiNames && scope.row.cengCiNames.length > 0">
            {{ scope.row.cengCiNames.join(', ') }}
          </span>
          <span v-else class="text-gray-400">未设置</span>
        </template>
      </el-table-column>
      <el-table-column label="授课教师" min-width="180" resizable>
        <template #default="scope">
          <div v-if="scope.row.teacherNames && scope.row.teacherNames.length > 0" class="teachers-display">
            <div class="teachers-list">
              <span 
                v-for="(teacherName, index) in scope.row.teacherNames" 
                :key="index" 
                class="teacher-item"
              >
                <span class="teacher-name">{{ teacherName }}</span>
                <el-tag 
                  v-if="scope.row.teacherPrimaryFlags && scope.row.teacherPrimaryFlags[index]" 
                  type="primary" 
                  size="small" 
                  effect="dark"
                  class="primary-tag"
                >
                  主讲
                </el-tag>
                <span v-if="index < scope.row.teacherNames.length - 1" class="separator">、</span>
              </span>
            </div>
          </div>
          <span v-else class="text-gray-400">未分配</span>
        </template>
      </el-table-column>
      <el-table-column label="学员人数" width="80" resizable>
        <template #default="scope">
          <el-tag size="small">{{ scope.row.studentCount || 0 }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="300" fixed="right" resizable>
        <template #default="scope">
          <div class="action-buttons">
            <el-button size="small" @click="$emit('edit', scope.row)">
              <el-icon><Edit /></el-icon> 编辑
            </el-button>
            <el-button size="small" type="primary" @click="$emit('setup-teachers', scope.row)">
              <el-icon><User /></el-icon> 设置教师
            </el-button>
            <el-button size="small" type="danger" @click="$emit('delete', scope.row)">
              <el-icon><Delete /></el-icon> 删除
            </el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="pagination-wrapper">
      <el-pagination
        :current-page="pagination.current || 1"
        :page-size="pagination.pageSize || 10"
        :page-sizes="[10, 20, 50, 100]"
        :total="pagination.total || 0"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="$emit('size-change', $event)"
        @current-change="$emit('current-change', $event)"
      />
    </div>
  </el-card>
</template>

<script>
import { computed } from 'vue'
import { Edit, Delete, User } from '@element-plus/icons-vue'

export default {
  name: 'AdminTeachingMissionTable',
  components: {
    Edit,
    Delete,
    User
  },
  props: {
    tableData: {
      type: Array,
      default: () => []
    },
    paginatedData: {
      type: Array,
      default: () => []
    },
    loading: {
      type: Boolean,
      default: false
    },
    pagination: {
      type: Object,
      default: () => ({
        current: 1,
        pageSize: 10,
        total: 0
      })
    }
  },
  emits: [
    'edit',
    'setup-teachers',
    'delete',
    'size-change',
    'current-change'
  ],
  setup(props) {
    // 统一数据源：优先使用 paginatedData，否则使用 tableData
    const displayData = computed(() => {
      return props.paginatedData.length > 0 ? props.paginatedData : props.tableData
    })

    return {
      displayData
    }
  }
}
</script>

<style scoped>
.table-card {
  margin-bottom: 20px;
}

.pagination-wrapper {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}

.text-gray-400 {
  color: #9ca3af;
}

/* 教师信息显示样式 */
.teachers-display {
  display: flex;
  align-items: center;
  gap: 8px;
}

.teachers-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
}

.teacher-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.teacher-name {
  font-weight: 500;
  color: #303133;
}

.primary-tag {
  font-size: 10px;
  height: 16px;
  line-height: 16px;
  padding: 0 4px;
}

.separator {
  color: #909399;
  margin: 0 2px;
}

/* 操作按钮样式 */
.action-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}

.action-buttons .el-button {
  margin: 0;
}

:deep(.el-table .cell) {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
